<template>
  <div>
    <div ref='editor'
         class="editor">
    </div>
  </div>
</template>

<script>
import Editor from 'wangeditor'
export default {
  name: 'wangeditor',
  props: {
    contentStr: String
  },
  model: {
    prop: 'contentStr',
    event: 'change'
  },
  data () {
    return {
      editor: null
    }
  },
  computed: {
    login () {
      return this.$store.getters.loginState
    }
  },
  mounted () {
    var editor = new Editor(this.$refs.editor)
    this.editor = editor
    editor.customConfig.onchange = (html) => {
      this.$emit('change', html)
    }
    editor.customConfig.colors = [
      '#000000',
      '#909399',
      '#eeece0',
      '#1c487f',
      '#4d80bf',
      '#c24f4a',
      '#8baa4a',
      '#7b5ba1',
      '#46acc8',
      '#f9963b',
      '#ffffff'
    ]
    editor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'code', // 插入代码
      'undo', // 撤销
      'redo' // 重复
    ]
    editor.create()
    if (!this.login) {
      editor.$textElem.attr('contenteditable', false)
      editor.txt.html("<p><divcourier new',=\"\" monospace;font-weight:=\"\" normal;font-size:=\"\" 14px;line-height:=\"\" 19px;white-space:=\"\" pre;\"=\"\"></divcourier></p><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span style=\"color: rgb(144, 147, 153); font-weight: bold; font-size: large;\">您需要登录后才可以发帖</span></div>")
    }
  },
  methods: {
    clear () {
      this.editor.txt.clear()
    },
    logout () {
      this.editor.txt.html("<p><divcourier new',=\"\" monospace;font-weight:=\"\" normal;font-size:=\"\" 14px;line-height:=\"\" 19px;white-space:=\"\" pre;\"=\"\"></divcourier></p><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span><br></span></div><div style=\"text-align: center;\"><span style=\"color: rgb(144, 147, 153); font-weight: bold; font-size: large;\">您需要登录后才可以发帖</span></div>")
    }
  }
}
</script>

<style scoped>
.editor {
  text-align: left;
  width: 800px;
  height: auto;
}
</style>
